<template>
  <div class="changePassword">
    <Card>
    <myData></myData>
    <Form :model="password" :label-width="85"  ref="passwordForm" :rules="ruleValidate" style="width: 500px">
      <FormItem label="旧密码" prop="oldPwd">
        <Input type="password" v-model="password.oldPwd" placeholder="请输入旧密码"></Input>
      </FormItem>
      <FormItem label="新密码" prop="newPwd">
        <Input type="password" v-model="password.newPwd" placeholder="请输入新密码"></Input>
      </FormItem>
      <FormItem label="确认新密码" prop="newPwd2">
        <Input type="password" v-model="password.newPwd2" placeholder="请确定新密码"></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit">提交修改</Button>
      </FormItem>
    </Form>
    </Card>
  </div>
</template>

<script>
  import myData from './myData'
  import axios from "axios";

  export default {

    name: "changePassword",
    components:{
      myData
    },
    data(){
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.password.newPwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }
      return {
        userForm:{
          pwd:'',
          userName:'',
          uNick:'',
          vipTime:null,
          userInt:'',
          id:''
        },
        password:{
          id:'',
          oldPwd:'',
          newPwd:'',
          newPwd2:'',
        },
        ruleValidate: {
          newPwd: [
            { required: true,min:6, message: '请输入新密码,至少6位', trigger: 'blur' }
          ],
          newPwd2: [
            { required: true,message: '两次密码不一致', trigger: 'blur' },
            { validator: validatePass, trigger: 'blur' }
          ],
        },
      }
    },
    methods:{

      handleSubmit () {
        this.$refs["passwordForm"].validate((valid) => {
          if (valid) {

            axios.get('http://localhost:8888/beforeChangePwd', {params:{pwd:this.password.oldPwd}}).then(res => {
              if (res){
                this.userForm.pwd = this.password.newPwd
                this.userForm.id =this.$getCookie("userId")
                axios.get('http://localhost:8888/changePwd', {params: this.userForm}).then(res => {
                  if (res) {
                    this.$Message.success('密码修改成功!');
                    this.$refs["passwordForm"].resetFields();
                    this.$clearCookie("userId");
                    this.$router.push({path: '/login'});
                  }else {
                    this.$Message.error('密码修改失败!');
                  }
                })
              }else{
                this.$Message.error('密码不正确!');
              }
            })

          } else {
            this.$Message.error('表单验证未通过!');
          }
        })
      },
      handleReset (name) {
        this.$refs[name].resetFields();
      },
    },
    mounted() {

    }
  }
</script>

<style scoped>
  .changePassword{
    margin:20px 0 0 50px;
  }
</style>
